<template>
	<view class="tab-box">
		<u-grid :col="4" :border="false" class="u-grid">
			<u-grid-item class="u-grid-item"  v-for="item,index in tabs" :key="index" @click="clickTabItem(index)">
				<image :src="item.image" mode="widthFix"></image>
				<view class="grid-text">{{item.title}}</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				tabs:[]
			};
		},
		methods:{
			...mapActions(['isInPage']),
			loadTab(){
				this.$api.home.tab()
				.then((res)=>{
					if(res.code == 1){
						this.tabs = res.data
					}
				})
			},
			clickTabItem(index){
				this.isInPage(this.tabs[index].path)
				.then(()=>{
					uni.switchTab({
						url: this.tabs[index].path
					})
				})
				.catch(()=>{
					uni.navigateTo({
						url: this.tabs[index].path
					})
				})
			},
		},
		mounted() {
			this.loadTab()
		}
	}
</script>

<style lang="scss" scoped>
	.tab-box{
		width: 730rpx;
		margin-left: 10rpx;
		padding: $uni-spacing-col-base 0;
		border-radius: $uni-border-radius-lg;
		.u-grid{
			.u-grid-item{
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				image{
					width: 88rpx;
				}
			}
		}
	}
</style>
